import { useCallback, useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import type { Engine } from "tsparticles-engine";

interface MousePosition {
  x: number;
  y: number;
}

const Welcome = () => {
  const navigate = useNavigate();
  const [mousePosition, setMousePosition] = useState<MousePosition>({ x: 0, y: 0 });
  const particlesInit = useCallback(async (engine: Engine) => {
    await loadFull(engine);
  }, []);

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePosition({
        x: (e.clientX / window.innerWidth) * 100,
        y: (e.clientY / window.innerHeight) * 100
      });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <div className="relative w-screen h-screen overflow-hidden bg-gradient-to-br from-[#00c6ff] to-[#0072ff]">
      {/* 动态渐变背景 */}
      <div 
        className="absolute inset-0 transition-all duration-300"
        style={{
          background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, 
            rgba(0, 198, 255, 0.8), 
            rgba(0, 114, 255, 0.9))`
        }}
      />

      {/* 粒子效果 */}
      <Particles
        id="tsparticles"
        init={particlesInit}
        options={{
          fullScreen: {
            enable: true,
            zIndex: 0
          },
          particles: {
            number: {
              value: 40,
              density: {
                enable: true,
                value_area: 800
              }
            },
            color: {
              value: ["#ffffff", "#00c6ff"]
            },
            opacity: {
              value: 0.5,
              random: true
            },
            size: {
              value: 3,
              random: true
            },
            move: {
              enable: true,
              speed: 1,
              direction: "none",
              random: true,
              straight: false,
              outModes: {
                default: "out"
              }
            },
            links: {
              enable: true,
              distance: 150,
              color: "#ffffff",
              opacity: 0.2,
              width: 1
            }
          },
          interactivity: {
            events: {
              onHover: {
                enable: true,
                mode: "grab"
              }
            },
            modes: {
              grab: {
                distance: 140,
                links: {
                  opacity: 0.5
                }
              }
            }
          }
        }}
      />

      {/* 主要内容 */}
      <div className="relative z-10 flex flex-col items-center justify-center h-full text-white">
      <motion.h1 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
          className="text-4xl font-light text-center mb-8"
          style={{ 
            color: 'white', 
            textShadow: '0 0 6px rgba(255,255,255,0.6), 0 0 20px rgba(0,198,255,0.5)' 
          }}
        >
          你好呀，愿你的心情像这片天空一样轻盈
        </motion.h1>



        <motion.button
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          whileHover={{ scale: 1.05 }}
          transition={{ duration: 0.3 }}
          onClick={() => navigate('/login')}
          className="px-8 py-3 rounded-full bg-white bg-opacity-20 
            hover:bg-opacity-40 shadow-lg hover:shadow-2xl 
            transition-all duration-300 backdrop-blur-sm text-gray-100"
        >
          开始体验
        </motion.button>
      </div>
    </div>
  );
};

export default Welcome; 